<template>
  <div id="normal-setting-box">
    <div id="product-setting-guide"></div>
    <div class="flex-x al-start">
      <div class="left-menu">
        <div class="menu-title">{{$t('product.setting.productSetTitle')}}</div>
        <template v-for="(item, index) in menuList">
          <nav :class="`menu-list ${nowMenu == index ? 'menu-checked' : ''}`"
               :id="item.comName"
               :key="index"
               @click="changePage(index)">
            <!-- <div class="left-border" v-if="nowMenu==index"></div> -->
            <div class="icon-box">
              <i :class="
                `iconfont ${item.icon} ${
                  nowMenu == index ? 'font-16 font-w-600' : 'font-14'
                }`
              "></i>
            </div>
            <span>{{ item.name }}</span>
          </nav>
        </template>
      </div>
      <!-- <keep-alive> -->
      <component :is="menuList[nowMenu].comName"
                 ref="setData"></component>
                 <!-- </keep-alive> -->

                 <!-- <wx-set v-if="nowMenu === 1"></wx-set>
      <toast-list v-if="nowMenu === 3"></toast-list> -->
    </div>
  </div>
</template>
<script>
import ProductSet from '@src/modules/setting/productV2/productSet';
import ProductMenuSet from '@src/modules/setting/productV2/productMenuSet';
import QrcodeSet from '@src/modules/setting/productV2/qrcodeSet';
import customerAdditionalSet from '@src/modules/setting/customer/customerAdditionalSetting/manage/customerAdditionalSet';

import { storageGet, storageSet } from '@src/util/storage';
import GuideContent from '@src/component/guide/contentCom/ProductSetting.vue';
/* mixin */
import ThemeMixin from '@src/mixins/themeMixin/index.ts'

import {
  PRODUCT_SETTING_SET
} from '@src/component/guide/productV2Store';
export default {
  name: 'product-menu-setting',
  mixins: [ThemeMixin],
  props: {
    initData: {
      type: Object,
      default: () => ({}),
    },
  },
  provide () {
    return {
      initData: this.initData,
    };
  },
  data () {
    return {
      menuList: [
        {
          name: '产品管理设置',
          icon: 'icon-shezhi-chanpinguanlishezhi',
          comName: 'product-set',
        },
        // {
        //   name: '产品类型设置',
        //   icon: 'icon-shezhi-chanpinmulu',
        //   comName: 'product-menu-set',
        // },
        // {
        //   name:'产品二维码设置',
        //   icon:'icon-qrcode',
        //   comName:'qrcode-set'
        // }
      ],
      nowMenu: 0, // 0 客户自助门户 1 公众号设置 2 短信消息设置 3 消息记录
    };
  },
  computed: {
    openSuperCodePro(){
      return this.initData?.openSuperCodePro;
    }
  },
  methods: {
    changePage (index) {
      // if(index==2){
      //   return location.href='/setting/product/additional'
      // }
      if (this.nowMenu === index) {
        return;
      }
      this.nowMenu = index;
    },
  },
  mounted () {
    if(this.openSuperCodePro){
      this.menuList.push(
        {
          name:'超级二维码设置',
          icon:'icon-qrcode',
          comName:'qrcode-set'
        },
        {
        name: '附加组件设置',
        icon: 'icon-Satisfied1',
        comName: 'customer-additional',
       }
      )
    }
    let type = this.$getUrlObj(window).type;
    let typeObj = {
      productSet: 0,
      qrcodeSet:1,
      customerAdditionalSet:2
    };
    console.log(typeObj[type], 'typeObj[type]')
    this.nowMenu = typeObj[type] || 0;
    this.$nextTick(() => {
      //添加定位
      if (window.frameElement.getAttribute('fromid') == 'frame_tab_M_SYSTEM') {
        setTimeout(()=>{
          let offsetTop=document.getElementById('productType').offsetTop ? document.getElementById('productType').offsetTop: 482
          document.getElementsByTagName('html')[0].scrollTop =  offsetTop - 10
        },500)
      }
      if (storageGet(PRODUCT_SETTING_SET) && storageGet(PRODUCT_SETTING_SET) > 0) this.$Guide().destroy('product-setting-guide')
      else this.$Guide([{
        content:
          '',
        haveStep: false,
        gStyle: 'top:35px',
        id: 'product-setting-guide',
        domId: 'product-menu-set',
        finishBtn: 'OK',
        diyContent:true,
        diyContentDom:GuideContent
      }], 0, '', (e) => {
        return new Promise((resolve, reject) => {
          resolve()
        })
      }).create().then(res_=>{if(res_)storageSet(PRODUCT_SETTING_SET, '1')})
    })
  },
  components: {
    [ProductSet.name]: ProductSet,
    [ProductMenuSet.name]: ProductMenuSet,
    [QrcodeSet.name]:QrcodeSet,
    [customerAdditionalSet.name]:customerAdditionalSet
  },
};
</script>
<style scoped  lang="scss">
.customer-additional-container {
  overflow: hidden;
}
</style>
<style lang="scss">
.al-start {
  align-items: flex-start;
}
.flex-1 {
  flex: 1;
}
.mar-b-12 {
  margin-bottom: 12px;
}
.mar-r-12 {
  margin-right: 12px;
}
.font-12 {
  font-size: 12px;
}
.font-14 {
  font-size: 14px;
}
.font-16 {
  font-size: 16px;
}
.al-c {
  align-items: center !important;
}
label {
  margin-bottom: 0;
}
#normal-setting-box {
  padding: 16px;
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  max-width: 100vw;
  #normal-setting-components-box {
    padding: 0;
  }
}
#normal-setting-components-box {
  flex: 1;
  min-width: 900px;
  box-sizing: border-box;
  min-height: 100vh;
}
::-webkit-scrollbar-track {
  background: transparent;
}
img {
  width: 100%;
  height: 100%;
}
.flex-x {
  display: flex;
  .left-menu {
    display: none;
    // width: 25%;
    min-width: 194px;
    width: 194px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 3px;
    overflow: hidden;
    position: sticky;
    position: -webkit-sticky;
    top: 10px;
    // max-width: 400px;
    .menu-title {
      font-size: 18px;
      color: #454648;
      padding: 10px;
      font-weight: 600;
    }
    .menu-list {
      border-left: 3px solid transparent;
      border-top: 1px solid #f4f4f4;
      padding: 10px 15px;
      position: relative;
      display: flex;
      align-items: center;
      cursor: pointer;
      &:hover {
        background: rgb(246, 246, 246);
      }
      span {
        font-size: 12px;
      }
      .left-border {
        height: 100%;
        width: 3px;
        position: absolute;
        left: 0;
        background: #55b7b4;
        top: 0;
      }
      .icon-box {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        margin-right: 13px;
      }
    }
    .menu-checked {
      border-left: 3px solid #55b7b4;
      @include borderLeftColor();
      &:hover {
        background: #fff;
      }
      span {
        font-size: 13px;
        font-weight: 500;
      }
    }
  }
}
</style>
